import React, { useState, useEffect } from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import { useNavigate, Link, Routes, Route, Navigate,Outlet } from "react-router-dom";
import logo from '../../logo.svg'
import { adminRoutes, mainRoutes } from '../../routes/index'
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
const routes = adminRoutes.filter(route => route.isShow)
console.log(document.location.pathname)
console.log(routes)
// function HomeButton() {
//     let history = useHistory();

//     function handleClick(p) {
//       history.push(p.key);
//     }
// }
function onOpenChange(openKeys) {
  let keysLen = openKeys.length
  if (keysLen > 1) {
    var trueOpen = openKeys.filter(item => {
      // 最后一个是当前展开的，把当前展开以及父导航设置为openkeys
      return openKeys[keysLen - 1].includes(item)
    })

  } else {

  }
  console.log(openKeys)
}
// function change() {
//   console.log(routes)
// }
function Index(props) {
  const [openKeys, setOpenKeys] = useState(undefined);

  const change = () => {
    console.log(props)
  }
  
  useEffect(() => {
    console.log(document.location)
  })
  return (
    <Layout>
      <Header className="header" style={{ background: '#428bca' }}>
        <div className="logo">
          <img src={logo} alt='logo' width='50px' height='50px'></img>
        </div>
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            style={{ height: '100%', borderRight: 0 }}
            onClick={change}
            defaultSelectedKeys={['/admin/dashboard']}
          >
            {routes.map(route => {
              return (
                <Menu.Item key={route.path} >
                  <Link to={route.path}>
                  {route.title}
                  </Link>
                </Menu.Item>)
            })}
          </Menu>
        </Sider>
        <Layout style={{ padding: '0 24px 24px' }}>
          <Content
            className="site-layout-background"
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
            }}
          >
            {/* {props.children} */}
            <Routes>
              {
                routes.map((item) => <Route path={item.path} element={item.element} key={item.index}></Route>)
              }
            </Routes>
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  )
}

export default Index
